<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>NIIT Bootstrap Template</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <link href="bootstrap.min.css" rel="stylesheet">
    <!-- 导航和页脚依赖的css -->
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- ======= Header ======= -->
        <header id="header">
            <div class="container d-flex align-items-center">
                <h1 class="logo mr-auto">
                    <a href="#home">Trinity</a>
                </h1>
                <!-- 使用按钮组实现 -->
                <div class="btn-group">
                    <button type="button" class="btn btn-outline-success">登录</button>
                    <button type="button" class="btn btn-outline-success">注册</button>
                </div>
            </div>
        </header>
        <!-- End Header -->
        <main class="container">
          <div class="row mt-2">
            <div class="col-md-3">
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <!-- .streched-link让任何HTML元素变为可点击元素，超链接变为绿色 -->
                        <a href="#" class="streched-link">待发货</a>
                        <span class="badge badge-primary badge-pill">6</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="#" class="streched-link">待收货</a>
                        <span class="badge badge-primary badge-pill">16</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="#" class="streched-link">待评价</a>
                        <span class="badge badge-primary badge-pill">9</span>
                    </li>
                </ul>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-lg-4 col-md-6 mt-2">
                        <img src="portfolio-1.jpg" class="img-fluid">
                        <h6 class="text-center">耳机</h6>
                        <p class="text-center">￥199</p>
                        <a href="portfolio-1.jpg" class="btn btn-light btn-block">查看详情</a>
                        <a href="#" class="btn btn-dark btn-block">加入购物车</a>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-2">
                        <img src="portfolio-2.jpg" class="img-fluid">
                        <h6 class="text-center">手表</h6>
                        <p class="text-center">￥599</p>
                        <a href="portfolio-2.jpg" class="btn btn-light btn-block">查看详情</a>
                        <a href="#" class="btn btn-dark btn-block">加入购物车</a>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-2">
                        <img src="portfolio-3.jpg" class="img-fluid">
                        <h6 class="text-center">太阳镜</h6>
                        <p class="text-center">￥99</p>
                        <a href="portfolio-3.jpg" class="btn btn-light btn-block">查看详情</a>
                        <a href="#" class="btn btn-dark btn-block">加入购物车</a>
                    </div>

                </div>
            </div>
          </div>
            
        </main>
        <!-- End #main -->
        <!-- ======= Footer ======= -->
        <!-- class="footer fixed-bottom container" -->
        <footer id="footer" class="container fixed-bottom">
            <div class="row p-1">
                <div class="col text-left">
                    <div>
                        &copy; Copyright
                        <strong>
                            <span>NIIT</span>
                            </strclass="min-vh-100"ong>. All Rights Reserved
                    </div>
                    <div>
                        Designed by NIIT
                    </div>
                </div>
                <div class="col text-right">
                    <div>
                        <address>
                            <strong>Trinity Organic</strong>
                            , Shanghai 23839,
                            <abbr title="Phone">P:</abbr> (123) 456-7890 <br>
                            <strong>Contact Details</strong>:
                            <a href="mailto:#">info@Trinityorganic.com</a>
                        </address>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>